<template>
  <div style="width: 1200px;margin: -50px auto" >
    <!--    分类菜单-->
    <el-row :gutter="24" class="tac">
      <el-col :span="5">
        <el-card style="margin-top: 50px;min-width: 164px;" shadow="never">
          <el-menu :default-active="activeIndex" router style="border-right: none">
            <el-menu-item v-for="(label, value) in categoryArr" :key="value"  @click="handleMenuItemClick(label)">
              {{label.label}}
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      <!--      推荐文章-->

      <el-col :span="14">
        <!-- 使用 Element UI 的 el-row 组件创建一个行布局，设置间距为20 -->
        <el-row :gutter="20" class="tac">
          <el-col :span="19" >
            <div style="width: 720px;height:59px;margin: 50px 0 0 0; background-color: white;">
              <el-menu mode="horizontal" :default-active="activeIndex"  router>
                <el-menu-item index="/index/recommended/">列表</el-menu-item>
              </el-menu>
            </div>
            <div style="width: 720px;min-height:100vh;margin: 0; background-color: white;">
              <router-view/>
            </div>
          </el-col>
        </el-row>

      </el-col>


      <el-col :span="5">

        <el-card style="margin-top: 50px;min-width: 364px;margin-left: 25px " shadow="never">
          <el-menu  default-active="/index/following" router style="border-right: none">
            <el-row>
              <el-col
              >
                <el-card :body-style="{ padding: '0px' }">
                  <img
                      src="/OIP-C1.jpg"
                      class="image"
                  />
                  <div style="padding: 14px">
                    <span>TEDU.COM</span>
                    <div class="bottom">
                      <time class="time">{{ currentDate }}</time>
                      <el-button text class="button">达内教育</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>

          </el-menu>

          <el-menu  default-active="/index/following" router style="border-right: none">
            <el-carousel>
              <el-carousel-item><img src="/eee.jpg" style="width: 100%"></el-carousel-item>
              <el-carousel-item><img src="/EEE.webp" style="width: 100%"></el-carousel-item>
              <el-carousel-item><img src="/HHH.jpg" style="width: 100%"></el-carousel-item>
              <el-carousel-item><img src="/OIP-C.jpg" style="width: 100%"></el-carousel-item>
              <el-carousel-item><img src="/KKK.jpg" style="width: 100%"></el-carousel-item>
            </el-carousel>
          </el-menu>
        </el-card>



      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import router from "@/router";
import tokenAxios from "@/http/request/TokenAxios";
import CategoryActive from "@/views/home/recommended/CategoryActive";
import { UploadFilled } from '@element-plus/icons-vue'
import simpleAxios from "@/http/request/SimpleAxios";
let currentActiveLabel = ref(null);
let categories=ref([]); // 声明一个变量来存储打桩输出
const categoryArr = ref([])
const activeIndex = ref('/') // 默认激活的菜单项路径
const articleArr = ref([]);


const handleMenuSelect = (index) => {
  activeMenuItem.value = index;
};
// 定义 handleMenuItemClick 函数
const handleMenuItemClick = (label) => {
  router.push("/categoryActive?categoryId="+label.id)

  articleArr.value = [];
  // 在这里处理菜单项点击事件的逻辑
  // console.log('菜单项被点击:', label);
  // 发送菜单名到服务端
// 从 categoryArr 中提取类别ID 并发出请求
  if (Array.isArray(categoryArr.value)) {
    // 从 categoryArr 中提取类别ID 并发出请求
    const categoryIds = categoryArr.value.map(category => category.value);
    // console.log('Extracted category IDs:', categoryIds);
    // 遍历类别ID并为每个类别发出请求
    categoryIds.forEach((categoryId) => {
      simpleAxios.get(BASE_URL+`:49282/article/${categoryId}`)
          .then((response) => {
            if (response.state === 20000) {
              articleArr.value.push(response.data); // 将接收到的数据添加到响应式数组中
            } else {
              console.error('请求返回非20000的状态码:', response.status);
            }
          })
          .catch((error) => {
            console.error('请求错误:', error);
          });
    });
  } else {
    console.error('categoryArr 不是一个数组');
  }
};


// 暴露 handleMenuItemClick 函数以便从父组件中访问
defineExpose({ handleMenuItemClick });
onMounted(() => {
  simpleAxios.get(BASE_URL+':49282/categories/tree')
      .then((response) => {
        if (response.state === 20000) {
          let data = response.data; // 提取数据以进行检查
          if (data && typeof data === 'object' && Array.isArray(data)) { // 检查数据的有效性
            // 将分类ID反转
            data.forEach((category, index) => {
              category.id = data.length - index; // 使用相反的索引作为ID
            });
            categories = data; // 赋值之前进行有效性检查
            categoryArr.value = data;
            // console.log('赋值后的 categoryArr:', categoryArr.value);
          } else {
            console.error('无效的分类数据:', data);
          }
        } else {
          console.error('请求返回非200的状态码:', response.state);
        }
      })
      .catch((error) => {
        console.error('请求错误:', error);
      }); // 使用 .catch() 处理请求中的错误
});



</script>

<style scoped>

/*.el-card.my-course-card {*/
/*  position: fixed;*/
/*  top: 50px; !* 或者根据需要设置合适的距离 *!*/
/*  z-index: 50; !* 确保卡片位于其他元素之上 *!*/
/*}*/

/*!* 如果你想让第二个 el-carousel 卡片也同步向上移动，可以这样设置： *!*/
/*.el-card.carousel-card {*/
/*  margin-top: -200px; !* 调整为适合你的值 *!*/
/*}*/
.active-menu {
  color: blue; /* 或者您想要的颜色 */
}
</style>